<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="utf-8">
		<title></title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-image: url(js/img/time.jpg); 
            background-size: cover;
            background-position: center;
            display: flex; /* 未使用,时间在上面 */
           justify-content: center;
           align-items: center;
            position: relative;
        }
        
        .child {
            background-color: rgba(255, 255, 255);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            font-weight: bold;
            font-family: 宋体;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child" id="timeDisplay"></div>
    </div>

    <script>
        // 获取时间显示元素
        const timeDisplay = document.getElementById('timeDisplay');
        
        // 补零函数
        function f(num) {
            return num < 10 ? '0' + num : num;
        }
        // 更新时间显示
        function updateTime() {
            const now = new Date();
            const hours = f(now.getHours());
            const minutes = f(now.getMinutes());
            const seconds = f(now.getSeconds());
            timeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
        }
        
        // 生成随机颜色
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
       // 更新时间和颜色的函数
		function updateColor() {
			updateTime();
			timeDisplay.style.color = getRandomColor();
}
 
		// 初始化时间
		updateTime();
 
		// 每500毫秒更新一次时间和颜色
		setInterval(updateColor, 500);
    </script>
</body>
</html>